<template>
  <view>
    <uni-popup ref="popup" type="bottom">
      <view class="region-picker">
        <view class="picker-header">
          <text class="title">所在地区</text>
          <text class="close" @tap="cancel">×</text>
        </view>
        
        <view class="picker-content">
          <view v-if="currentStep === 0">
            <view class="list-title">
              <text class="list-title-active">请选择</text>
              <view class="active-line"></view>
            </view>
            <view class="region-list">
              <view 
                v-for="(item, index) in provinceList" 
                :key="index"
                class="region-item"
                @tap="selectProvince(item)"
              >
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
          
          <view v-else-if="currentStep === 1">
            <view class="list-title">
              <text>{{ selectedRegion[0] }}</text>
              <text class="list-title-active">请选择</text>
              <view class="active-line"></view>
            </view>
            <view class="region-list">
              <view 
                v-for="(item, index) in cityList" 
                :key="index"
                class="region-item"
                @tap="selectCity(item)"
              >
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
          
          <view v-else>
            <view class="list-title">
              <text>{{ selectedRegion[0] }}</text>
              <text>{{ selectedRegion[1] }}</text>
              <text class="list-title-active">请选择</text>
              <view class="active-line"></view>
            </view>
            <view class="region-list">
              <view 
                v-for="(item, index) in districtList" 
                :key="index"
                class="region-item"
                @tap="selectDistrict(item)"
              >
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { provinces, cities, districts } from '../static/data/region-data.js';

// 引入uni组件
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';

const props = defineProps({
  value: {
    type: String,
    default: ''
  }
});

const emits = defineEmits(['update:value', 'confirm', 'cancel']);

const popup = ref(null);
const currentStep = ref(0);
const selectedRegion = ref(['', '', '']);
const selectedCodes = ref(['', '', '']);

// 省份列表
const provinceList = computed(() => {
  return provinces;
});

// 城市列表
const cityList = computed(() => {
  if (!selectedCodes.value[0]) return [];
  return cities[selectedCodes.value[0]] || [];
});

// 区县列表
const districtList = computed(() => {
  if (!selectedCodes.value[1]) return [];
  return districts[selectedCodes.value[1]] || [];
});

// 选择省份
const selectProvince = (item) => {
  selectedRegion.value[0] = item.name;
  selectedCodes.value[0] = item.code;
  
  // 清空后续选择
  selectedRegion.value[1] = '';
  selectedRegion.value[2] = '';
  selectedCodes.value[1] = '';
  selectedCodes.value[2] = '';
  
  // 切换到城市选择
  currentStep.value = 1;
};

// 选择城市
const selectCity = (item) => {
  selectedRegion.value[1] = item.name;
  selectedCodes.value[1] = item.code;
  
  // 清空区县选择
  selectedRegion.value[2] = '';
  selectedCodes.value[2] = '';
  
  // 切换到区县选择
  currentStep.value = 2;
};

// 选择区县
const selectDistrict = (item) => {
  selectedRegion.value[2] = item.name;
  selectedCodes.value[2] = item.code;
  
  // 选完区县后，自动确认并关闭
  const regionText = selectedRegion.value.join(' ');
  emits('update:value', regionText);
  emits('confirm', {
    region: regionText,
    codes: [...selectedCodes.value]
  });
  
  popup.value.close();
};

// 重置为初始状态
const resetSelection = () => {
  currentStep.value = 0;
  selectedRegion.value = ['', '', ''];
  selectedCodes.value = ['', '', ''];
};

// 打开选择器
const open = () => {
  // 重置为初始状态
  resetSelection();
  
  // 如果有初始值，解析初始值
  if (props.value) {
    const parts = props.value.split(' ');
    if (parts.length >= 3) {
      // 设置已有的选择，但不改变当前步骤
      selectedRegion.value = parts;
    }
  }
  
  popup.value.open();
};

// 取消选择
const cancel = () => {
  popup.value.close();
  resetSelection();
  emits('cancel');
};

// 暴露方法给父组件
defineExpose({
  open
});
</script>

<style>
.region-picker {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  min-height: 800rpx;
}

.picker-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90rpx;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.close {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 44rpx;
  color: #999;
}

.picker-content {
  height: calc(100vh - 400rpx);
  max-height: 800rpx;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
}

.list-title {
  display: flex;
  align-items: center;
  padding: 30rpx 30rpx 20rpx;
  position: relative;
}

.list-title text {
  margin-right: 30rpx;
  font-size: 30rpx;
  color: #333;
}

.list-title-active {
  color: #ff6b35 !important;
  font-weight: 500;
}

.active-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4rpx;
  background-color: #ff6b35;
}

.region-list {
  padding-top: 10rpx;
}

.region-item {
  height: 100rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  font-size: 30rpx;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
}
</style> 